<template>
  <div class="project-card" v-hover-effect="{ scale: 1.03 }">
    <div class="project-image">
      <img :src="project.image" :alt="project.title" loading="lazy">
      <div class="project-overlay">
        <div class="project-links">
          <a :href="project.liveUrl" target="_blank" class="btn btn-demo" v-if="project.liveUrl">
            演示
          </a>
          <a :href="project.codeUrl" target="_blank" class="btn btn-code" v-if="project.codeUrl">
            代码
          </a>
        </div>
      </div>
    </div>
    <div class="project-content">
      <h3 class="project-title">{{ project.title }}</h3>
      <p class="project-description">{{ project.description }}</p>
      <div class="project-tech">
        <span v-for="(tech, index) in project.technologies" :key="index" class="tech-tag">
          {{ tech }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProjectCard',
  props: {
    project: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
.project-card {
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .project-image {
    position: relative;
    height: 0;
    padding-bottom: 60%;
    overflow: hidden;
    
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .project-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .project-links {
      display: flex;
      gap: 1rem;
      
      .btn {
        padding: 0.6rem 1.2rem;
        border-radius: 4px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        
        &.btn-demo {
          background: linear-gradient(45deg, #12c2e9, #c471ed);
          color: white;
          
          &:hover {
            box-shadow: 0 5px 15px rgba(196, 113, 237, 0.4);
          }
        }
        
        &.btn-code {
          background: rgba(255, 255, 255, 0.1);
          color: white;
          backdrop-filter: blur(5px);
          
          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
  }
  
  .project-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .project-title {
      font-size: 1.2rem;
      margin: 0 0 0.8rem;
      color: #fff;
    }
    
    .project-description {
      color: #aaa;
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1.2rem;
      flex: 1;
    }
    
    .project-tech {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: auto;
      
      .tech-tag {
        background: rgba(255, 255, 255, 0.05);
        color: #c471ed;
        padding: 0.3rem 0.7rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 500;
      }
    }
  }
  
  &:hover {
    .project-image {
      img {
        transform: scale(1.1);
      }
      
      .project-overlay {
        opacity: 1;
      }
    }
  }
}
</style> 